// 角色管理
<template>
  <div class="big_box" id="userBig">
    <el-tabs class="scorllFixed" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.path" v-for="item in jurisdiction" :key="item.name">
        <router-view v-if="activeName === item.path"></router-view>
      </el-tab-pane>
      <!-- <el-tab-pane label="角色列表" name="roleManage">
      <router-view v-if="activeName === 'roleManage'"></router-view>
    </el-tab-pane>
    <el-tab-pane label="角色权限" name="rolePermissions">
      <router-view v-if="activeName === 'rolePermissions'"></router-view>
      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>
<script>
import { setUrl } from '@/utils/getUrl.js'
import { getAuthority } from '@/assets/js/getAuthority.js'
// import { startLoading } from '../../utils/loading.js'
export default {
  data() {
    return {
      activeName: 'roleManage',
      jurisdiction: [],
    }
  },
  watch: {
    jurisdiction: {
      deep: true,
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.jurisdiction = newVal // 保存列表
        this.activeName = this.$route.name
        this.$router.push(this.$route.path)
      },
    },
    // 监听url中的hash值的变化
    $route(to, from) {
      const hashUrl = window.location.hash.substr(2)
      if (hashUrl.startsWith('roleManage')) {
        this.activeName = 'roleManage'
      } else if (hashUrl.startsWith('rolePermissions')) {
        this.activeName = 'rolePermissions'
      }
    },
  },
  created() {
    getAuthority(this, 'roleLists') // 获取权限
    // const menus = JSON.parse(getUrl('jurisdiction'))
    // if (menus.length === 0) {
    //   return this.$router.push('/excel')
    // }
    // this.activeName = menus[0].qxfwlj
    // let obj = {}
    // menus.forEach((item) => {
    //   obj = {
    //     name: item.qxmc,
    //     path: item.qxfwlj,
    //   }
    //   this.jurisdiction.push(obj)
    // })
    // // 判断本地存储中是否有地址
    // const url = getUrl('roleLists')
    // if (!url) return (this.activeName = this.jurisdiction[0].path)
    // this.activeName = url
  },
  mounted() {
    // startLoading(document.getElementById('userBig'))
  },
  methods: {
    // 刷新右侧需要调用的函数
    getChildRefresh() {
      getAuthority(this, 'roleLists') // 获取权限
    },
    handleClick(tab, event) {
      // 防止一直加载动画
      // if (window.location.hash.substr(2) !== tab.name) {
      //   startLoading(document.getElementById('userBig'))
      // }
      setUrl('roleLists', tab.name)
      if (tab.name === 'roleManage') {
        this.$router.push('/roleManage')
      } else if (tab.name === 'rolePermissions') {
        this.$router.push('/rolePermissions')
      }
    },
  },
  destroyed() {
    // 默认
    setUrl('roleLists', '')
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-tabs__nav-scroll {
//   width: 100%;
//   position: fixed;
//   z-index: 60;
//   background-color: #fff;
// }

// ::v-deep .el-tabs__nav-scroll::after {
//   content: '';
//   position: absolute;
//   left: 0;
//   bottom: 0;
//   width: 100%;
//   height: 2px;
//   background-color: #e4e7ed;
//   z-index: 1;
// }
</style>
